This is intended to eventually replace our use of the color map and Accoutrement color() function.

I've added the new color variables as an additional file so that we can start experimenting with them now, and fully transition if/when we see fit.

Storing our colors as CSS variables is especially useful as they are easily previewed and changed in the inspector, without having to find or remember hex values:

Please note that our stack values no longer include the --light descriptor, and simply start from a base --gray and then sequence from --gray1 to --gray9 etc.

Usage examples:

background-color: var(--dark-blue);
color: var(--dark-text);
border: 1px solid var(--border);

I have not implemented any IE fallbacks, so this will only work in all other modern browsers. There is an official postcss module that will convert any values scoped to the :root {}, which is fine for these colors, but not so flexible if we want to scope variables within blocks or media queries (https://github.com/postcss/postcss-custom-properties). A less popular postcss module claims to be more flexible, but doesn't quite meet the spec (https://github.com/MadLittleMods/postcss-css-variables).

More on CSS variables (custom properties):

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care